<!-- 轮播管理 -->
<template>
  <div id="carouselManagement">
    <c-title :text="this.$i18n.t('base.carouselManagement')"></c-title>
    <div class="list mt-10 mr-10 ml-10">
      <div v-for="item in list" :key="item.id" class="item flex-a-c mb-10 bg-fff b-radius-8" @click.stop="openSlidePop(item.id)">
        <div class="flex-1 line-clamp-1 mr-10 t-l f-14 f-bold">{{ item.slide_name }}</div>
        <i class="iconfont icon-advertise-next"></i>
      </div>
    </div>

    <div style="height: 10rem;"></div>

    <div class="fixed-bottom p-8">
      <van-button round type="info" block @click.stop="openSlidePop(0)">{{ $i18n.t('base.addCarousel') }}</van-button>
    </div>

    <van-popup v-model="showPop" position="bottom" round>
      <van-nav-bar :title="$i18n.t('base.settings')" :right-text="$i18n.t('base.cancel')" @click-right="showPop = false"/>
      <div class="list mt-10 ">
        <div class=" mb-10 bg-fff b-radius-8">
          <van-field v-model="info.slide_name" autosize :label="$i18n.t('base.name')" type="textarea" :placeholder="$i18n.t('base.name')" />
          <van-field v-model="info.display_order" rows="1" autosize :label="$i18n.t('base.sort')" type="textarea" :placeholder="$i18n.t('base.pleaseEnter') + ' ' + $i18n.t('base.sort')" />
          <div class="flex-1 line-clamp-1 mr-10 t-l f-14 f-bold p-8">{{ $i18n.t('base.uploadImage') }}</div>
          <yz_uploader v-model="adimg1" :max_count="1" ref="yz_uploader1"></yz_uploader>
          <van-field v-model="info.link" rows="2" autosize :label="$i18n.t('base.jumpLink')" type="textarea" :placeholder="$i18n.t('base.pleaseEnter') + ' ' + $i18n.t('base.jumpLink')" />

          <van-field name="radio" :label="$i18n.t('base.isVisible')">
            <template #input>
              <van-radio-group v-model="info.enabled" direction="horizontal">
                <van-radio style="display: flex;" :name="1">{{ $i18n.t('base.show') }}</van-radio>
                <van-radio style="display: flex;" :name="0">{{ $i18n.t('base.hide') }}</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </div>
      </div>
      <div class="flex" v-if="activeSlideID">
        <van-button type="danger" block @click.stop="delSlide">{{ $i18n.t('base.delete') }}</van-button>
        <van-button type="primary" block @click.stop="saveSlide">{{ $i18n.t('base.edit') }}</van-button>
      </div>
      <div class="flex" v-else>
        <van-button type="primary" block @click.stop="saveSlide">{{ $i18n.t('base.save') }}</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { scrollMixin } from "utils/mixin";
import yz_uploader from "components/ui_components/yz_uploader";

export default {
  mixins: [scrollMixin],
  data() {
    return {
      list: [],
      showPop: false,
      info: {},
      adimg1: [],
      activeSlideID: null
    };
  },

  activated() {
    this.getData();
  },

  components: { yz_uploader },

  computed: {},

  mounted() {},

  methods: {
    async getData() {
      let { result, msg, data } = await $http.get("plugin.supplier.frontend.slide.list", {}, ".");
      if (result == 0) return this.$toast(msg);
      this.list = data.data;
      this.current_page = data.current_page;
      this.last_page = data.last_page;
    },
    async getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      let { result, msg, data } = await $http.get("plugin.supplier.frontend.slide.list", { page }, ".");
      this.isLoadMore = true;
      if (result == 0) return this.$toast(msg);
      this.list = this.list.concat(data.data);
      this.current_page = data.current_page;
    },
    openSlidePop(id){
      this.info = {};
      this.adimg1 = [];
      this.activeSlideID = id || null;
      if(id) {
        this.getSlideInfo(id);
      } else {
        this.showPop = true;
        this.$refs.yz_uploader1.setFileList1([]);
      }
    },
    async getSlideInfo(id) {
      let { result, msg, data } = await $http.post("plugin.supplier.frontend.slide.getOne", { id: id }, ".");
      this.info = { ...data };
      this.adimg1 = [data.thumb];
      this.showPop = true;
      this.$nextTick(() => {
        this.$refs.yz_uploader1.setFileList1([data.thumb]);
      });
    },
    async saveSlide() {
      let _url = 'plugin.supplier.frontend.slide.create';
      if(this.activeSlideID) {
        _url = 'plugin.supplier.frontend.slide.edit';
      }
      let { slide_name, display_order = "0", link = "", enabled } = this.info;
      let { result, msg, data } = await $http.post(_url,
        {
          thumb: this.adimg1[0],
          slide_name,
          display_order,
          link,
          enabled,
          id: this.activeSlideID
        },
        "."
      );
      this.$toast(msg);
      this.showPop = false;
      this.getData();
    },
    async delSlide() {
      let { result, msg, data } = await $http.post(
        "plugin.supplier.frontend.slide.delete",
        {
          id: this.activeSlideID
        },
        "."
      );
      this.showPop = false;
      this.$toast(msg);
      // 刷新页面
      window.location.reload();
    },
    goToUrl(name, params = {}, query = {}) {
      if (!name) return;
      this.$router.push(this.fun.getUrl(name, params, query));
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.mt-10 {
  margin-top: 0.75rem;
}
.mb-10 {
  margin-bottom: 0.75rem;
}
.mr-10 {
  margin-right: 0.75rem;
}
.ml-10 {
  margin-left: 0.75rem;
}
.b-radius-8 {
  border-radius: 0.5rem;
}
.bg-fff {
  background-color: #fff;
}
.p-8 {
  padding: 0.5rem;
}
.flex-1 {
  flex: 1;
}
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;

  .van-button {
    width: 100%;
  }
}
.item {
  padding: 1rem 0.5rem;
}
</style>
